import { memo, useEffect, useState } from "react";
import { Card, Form, Input, Select, Button, message } from "antd";

import { GetUserByIdService, UpdatedUserInfoService } from "@/service";
import { useLocation, useNavigate } from "react-router-dom";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { IDispatch, IStore, ResetSliceActions, fetchMenuThunk } from "@/store";
import UploadFile from "@/components/upload-file/upload-file";
// const { Option } = Select;
const Info = memo(() => {
  const navigate = useNavigate();
  const dispatch = useDispatch<IDispatch>();
  const store = useSelector((state: IStore) => state.user, shallowEqual);
  const _ = useLocation();
  const [form] = Form.useForm();
  const [userInfo, setUserInfo] = useState<any>({});
  function handleUpdateUserClick() {
    if (!/^1[3-9]\d{9}$/.test(userInfo.phone)) {
      message.error("请确定手机号码无误！");
      return;
    }
    UpdatedUserInfoService(userInfo).then(({ code }: any) => {
      if (code === 0) {
        message.success("更新成功，正在重新获取数据。");
        dispatch(fetchMenuThunk(userInfo.id)).then((res) => {
          setUserInfo(store.user);
          form.setFieldsValue(store.user);
        });
      }
    });
  }

  useEffect(() => {
    console.log("store.user", store.user);
    setUserInfo(store.user);
    form.setFieldsValue(store.user);
  }, []);

  return (
    <div
      style={{
        height: "96%",
        borderRadius: "5px",
      }}
      className="card relative"
    >
      <img
        className="absolute top-0 left-0 ring-0 bottom-0 w-full"
        src={store.user.background}
        alt=""
      />
      <div
        style={{
          background: "rgba(255,255,255, .7)",
          width: "400px",
          padding: "12px 0 0",
          borderRadius: "5px",
        }}
        className=" fixed z-10"
      >
        <Form
          preserve={false}
          form={form}
          wrapperCol={{ span: 16 }}
          labelCol={{ span: 3 }}
          className="h-[440px] max-h-[95%] overflow-y-auto"
        >
          <Form.Item className="mb-3 items-center" label="头像">
            <UploadFile
              setImageUrl={(img) =>
                setUserInfo({
                  ...userInfo,
                  avatar: img,
                })
              }
              type="anima"
              imageUrl={userInfo.avatar}
            >
              <div className="w-20 h-20 rounded-full overflow-hidden">
                <img className="" src={userInfo.avatar} alt="" />
              </div>
            </UploadFile>
          </Form.Item>
          <Form.Item className="mb-3" label="昵称">
            <Input
              onChange={(e) =>
                setUserInfo({ ...userInfo, nick_name: e.target.value })
              }
              value={userInfo.nick_name}
            ></Input>
          </Form.Item>
          <Form.Item className="mb-3" label="姓名">
            <Input
              onChange={(e) =>
                setUserInfo({ ...userInfo, user_name: e.target.value })
              }
              value={userInfo.user_name}
            ></Input>
          </Form.Item>
          <Form.Item className="mb-3" label="手机">
            <Input
              onChange={(e) =>
                setUserInfo({ ...userInfo, phone: e.target.value })
              }
              value={userInfo.phone}
            ></Input>
          </Form.Item>
          <Form.Item className="mb-3" label="邮箱">
            <Input
              onChange={(e) =>
                setUserInfo({ ...userInfo, email: e.target.value })
              }
              value={userInfo.email}
            ></Input>
          </Form.Item>
          <Form.Item className="mb-3" label="性别">
            <Select
              style={{ width: "100px" }}
              value={userInfo.sex}
              onChange={(val) => setUserInfo({ ...userInfo, sex: val })}
            >
              <Select.Option value="男">男</Select.Option>
              <Select.Option value="女">女</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="背景">
            <UploadFile
              setImageUrl={(img) =>
                setUserInfo({
                  ...userInfo,
                  background: img,
                })
              }
              type="anima"
              imageUrl={userInfo.background}
            >
              <div className="w-72 h-20 overflow-hidden">
                <img className="h-full" src={userInfo.background} alt="" />
              </div>
            </UploadFile>
          </Form.Item>
        </Form>
        <Button
          className="absolute right-5 bottom-5"
          onClick={() => handleUpdateUserClick()}
          type="primary"
        >
          刷新信息
        </Button>
      </div>
    </div>
  );
});

export default Info;
